import React from "react";
import { Form, Button, Card, Input, message, Icon, Checkbox } from "antd";
const FormItem = Form.Item;

class Logins extends React.Component {
  handleSubmit = () => {
    //API封装好的方法 获取表单里的值
    let uesrInfo = this.props.form.getFieldsValue();
    //API循环表单验证
    this.props.form.validateFields((err, values) => {
      if (!err) {
        message.success(
          `${uesrInfo.userName} 欢迎登录`
        );
      }
    });
  };

  render() {
    //api自动封装好的方法 用于表单验证等
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Card title="登录行内表单">
          <Form layout="inline">
            <FormItem>
              <Input placeholder="请输入用户名" />
            </FormItem>
            <FormItem>
              <Input placeholder="请输入密码" />
            </FormItem>
            <FormItem>
              <Button type="primary">登录</Button>
            </FormItem>
          </Form>
        </Card>

        <Card title="登录水平表单" style={{ marginTop: 10 }}>
          <Form layout="horizontal" style={{ width: 300 }}>
            <FormItem>
              {getFieldDecorator("userName", {
                initialValue: "", //初始化值
                rules: [
                  {
                    //验证规则
                    required: true,
                    message: "密码不能为空"
                  },
                  {
                    min: 5,
                    max: 10,
                    message: "长度为5-10位"
                  },
                  {
                    // pattern:/^\w+$/g,
                    pattern: new RegExp("^\\w+$", "g"),
                    message: "字母或者数字开头"
                  }
                ]
              })(
                <Input
                  prefix={<Icon type="user" />}
                  placeholder="请输入用户名"
                />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator("psword", {
                initialValue: "", //初始化值
                rules: [] //验证规则
              })(
                <Input prefix={<Icon type="lock" />} placeholder="请输入密码" />
              )}
            </FormItem>
            <FormItem>
                {
                    getFieldDecorator("rember",{
                        initialValue:true, //checkbox 必须写
                        valuePropName:'checked', //checkbox 必须写
                    })(
                        <Checkbox>记住密码</Checkbox>
                    )
                }
                <a href="#" style={{float:'right'}}>忘记密码</a>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSubmit}>
                登录
              </Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }
}

//这句话一定要加 不然报错
//export default 从上面移到下面
export default Form.create()(Logins); //(组件名)
